<!-- 生成对帐记录 -->
<template>
  <Card>
    <Row class="ivu-mb-16">
        <Col >
            <DatePicker type="month" v-model="params.start_month" placeholder="请选择月份" style="width: 150px"></DatePicker>-
            <DatePicker type="month" v-model="params.end_month" placeholder="请选择月份" style="width: 150px"></DatePicker>
        </Col>
        <Col class="ivu-ml-16">
          <Button type="primary" @click="changeSearch">查询</Button>
        </Col>
    </Row>
    <Table highlight-row :columns="columns" :data="data" class="ivu-mt-16" :loading="loading">
       <template slot-scope="{ row }" slot="operation">
          <a
            v-hasC="{
                name: '-v1-marketing-dingtalk-bill-info',
                flag: '/v1/marketing/dingtalk/bill-info',
            }"
            @click="handleAllocation(row)"
            >详情</a
          >
      </template>
    </Table>
    <div class="ivu-mt" style="display: flex; justify-content: center;">
      <Page
          show-total
          show-elevator
          show-sizer
          :total="total"
          :current.sync="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOpts"
          @on-change="formSize"
          @on-page-size-change="formChangePage"
      />
    </div>
    <Modal v-model="modal" :title="'对帐单'" @on-cancel="handleDrawerCancel('formItem')" width="1200" footer-hide>
      <Row class="ivu-mb-16">
        <Col span="17" style="font-size:18px;font-weight:bolder">
           <span>{{detail.start_date}}-{{detail.end_date}}{{detail.net_config_name}}</span><span>对帐单</span>
        </Col>
        <Col span="7" >
          <span>生成日期：</span><span>{{detail.created_at_str}}</span>
          <span class="ivu-ml-16">生成人：</span><span>{{detail.realname}}</span>
        </Col>
      </Row>
      <Table row-key="id" :indent-size="0" :load-data="handleLoadData" :update-show-children="true"  highlight-row :columns="modalcolumns" :data="modaldata" class="ivu-mt-16" :loading="modalloading"></Table>
    </Modal>
  </Card>
</template>
<script>
import {billList,billInfo}from'@/api/hqapi/networkMarketing.js'
export default {
  data(){
    return{
      columns:[
        { title: "年份", key: "month_time_str", minWidth: 108 },
        { title: "上月余额", key: "history_surplus_real_money", minWidth: 150 },
        { title: "实批金额", key: "real_money", minWidth: 150 },
        { title: "本月返点金额", key: "rebate_money", minWidth: 150 },
        { title: "历史返点金额", key: "history_rebate_money", minWidth: 150 },
        { title: "消费", key: "consume_total_money", minWidth: 90 },
        { title: "本月剩余", key: "surplus_real_money", minWidth: 150  },
        { title: "生成日期", key: "created_at_str", minWidth: 150  },
        { title: "生成人", key: "realname", minWidth: 90 },
        { title: "操作", slot: "operation", fixed:'right', width: 118 },
      ],
      data:[],
      loading:false,
      modal:false,
      params: {start_month:'',end_month:'', page: 1, pageSize: 10 },
      total: 0,
      pageOpts: [10, 20, 50, 100], // 分页每页数量
      modalcolumns:[
         { title: '渠道', key: 'source_name', fixed: 'left', tree: true, minWidth: 200 },
          { title: '上月余额', key: 'history_surplus_real_money', minWidth: 150 },
          { title: '实批金额', key: 'real_money', width: 150 },
          { title: '本月返点金额', key: 'rebate_money', width: 150 },
          { title: '历史返点金额', key: 'history_rebate_money', width: 150 },
          { title: '营销费用', key: 'market_money', width: 100 },
          { title: '基建费用', key: 'construct_money', width: 100 },
          { title: '本月剩余', key: 'surplus_real_money', width: 150 },
      ],
      modaldata:[],
      modalloading:false,
      id:'',
      detail:{},
      allData: {},
      allDatas: {},
      dataHeader: [],
      dataHeaders: [],
      dataData:[],
    }
   
  },
  methods:{
    initial(){
      this.getData()
    },
    changeSearch(){
      // console.log(this.params.end_month,'this.params.end_month')
      if(this.params.end_month>this.params.start_month){
        this.getData()
      }else{
        this.$Message.error('结束时间不能早于开始时间')
      }
    },
    getData(){
      const params={
        start_month:this.params.start_month?this.$Date(this.params.start_month).format('YYYY-MM'):'',
        end_month:this.params.end_month?this.$Date(this.params.end_month).format('YYYY-MM'):'',
        page:this.params.page,
        pageSize:this.params.pageSize,
      }
      billList(params).then(res=>{
        this.data=res.list
        this.total=res.total
      })
    },
    formSize(index){
      this.params.page=index
      this.getData()
    },
    formChangePage(e){
      this.params.pageSize=e
      this.getData()
    },
    handleDrawerCancel(){
      //
    },
    //详情
    handleAllocation(row){
      this.id=row.id
      this.getDetails()
      this.modal=true
    },
    //
    getDetails(){
      billInfo({id:this.id}).then(res=>{
        // console.log(res,'res')
        this.detail=res
        this.dataData = res.detail
        this.modaldata=[]
        res.detail.forEach(item => {
          this.allData[item.id] = item.children
          if (item.children) {
            this.modaldata.push({
              _loading: false,
              source_name: item.source_name,
              history_surplus_real_money:item.history_surplus_real_money,
              real_money: item.real_money,
              rebate_money: item.rebate_money,
              history_rebate_money: item.history_rebate_money,
              market_money: item.market_money,
              construct_money: item.construct_money,
              surplus_real_money: item.surplus_real_money,
              children: [],
              id: item.id,
            })
          }else{
              this.modaldata.push({
              source_name: item.source_name,
              history_surplus_real_money:item.history_surplus_real_money,
              real_money: item.real_money,
              rebate_money: item.rebate_money,
              history_rebate_money: item.history_rebate_money,
              market_money: item.market_money,
              construct_money: item.construct_money,
              surplus_real_money: item.surplus_real_money,
              id: item.id,
            })
          }
        })

      })
    },
    handleLoadData (item, callback) {
      //  console.log(item,'item')
      item._loading = true
      setTimeout(() => {
          const data = this.allData[item.id]
          // console.log(data,'data')
          callback(data);
      });
    },
  }
}
</script>